<template>
  <div @click.exact="clearSelect()">
    <div class="pan-main-breadcrumb-content">
      <el-breadcrumb style="display: inline-block">
        <el-breadcrumb-item>
          <router-link class="breadcrumb-item-a" to="/files">返回</router-link>
        </el-breadcrumb-item>
      </el-breadcrumb>
      <el-divider direction="vertical" style="vertical-align: top !important" />
      <el-breadcrumb
        separator-class="el-icon-arrow-right"
        style="display: inline-block"
      >
        <el-breadcrumb-item>
          <a class="breadcrumb-item-a" href="#">我的分享</a>
        </el-breadcrumb-item>
      </el-breadcrumb>
      <div style="margin-left: auto; display: flex; align-items: center">
        <el-button
          type="danger"
          size="mini"
          round
          @click="cancelShares"
          :disabled="multipleSelection.length === 0"
        >
          取消分享<i class="el-icon-switch-button el-icon--right" />
        </el-button>
      </div>
    </div>

    <div :class="'file-list1 table'" v-if="tableData.length > 0">
      <div class="item">
        <div :class="'file-item'">
          <div class="check">
            <el-checkbox v-model="checkAll"></el-checkbox>
          </div>

          <div class="name">分享名称</div>
          <div class="action"></div>
          <div class="link">分享链接</div>
          <div class="code">提取码</div>
          <div class="time">分享时间</div>
          <div class="state">分享状态</div>
        </div>
      </div>
    </div>
    <el-scrollbar
      class="scrollbar"
      style="height: calc(100vh - 45px - 63px)"
      v-if="tableData.length > 0"
    >
      <div :class="'file-list table'">
        <div
          class="item"
          v-for="(item, index) in tableData"
          :key="item.shareId"
          :data-id="index"
          @click.exact.stop="selectItem(item)"
          @contextmenu.prevent.stop="itemRightMenu($event, item, index)"
        >
          <div :class="'file-item item' + index">
            <div class="check">
              <el-checkbox :value="getListIndex(item) >= 0"></el-checkbox>
            </div>
            <div class="icon">
              <svg class="svgicon" aria-hidden="true">
                <use :xlink:href="'#icon-wenjianjiafenxiang'"></use>
              </svg>
            </div>
            <div class="name">
              {{ item.shareName }}
            </div>
            <div class="action">
              <el-tooltip
                class="item"
                effect="light"
                content="复制链接"
                placement="top"
              >
                <el-button
                  type="success"
                  size="small"
                  circle
                  @click="copy(item)"
                >
                  <i class="el-icon-link" />
                </el-button>
              </el-tooltip>
              <el-tooltip
                class="item"
                effect="light"
                content="取消分享"
                placement="top"
              >
                <el-button
                  type="danger"
                  size="small"
                  circle
                  @click="cancelShare(item)"
                >
                  <i class="el-icon-switch-button" />
                </el-button>
              </el-tooltip>
            </div>
            <div class="link">
              <el-link type="primary" :href="item.shareUrl" target="_blank">{{
                item.shareUrl.substring(0, 30) + '...'
              }}</el-link>
            </div>
            <div class="code">
              {{ item.shareCode }}
            </div>
            <div class="time">
              {{ item.createTime }}
            </div>
            <div class="state">
              {{ formatShareStatus(item) }}
            </div>
          </div>
        </div>
      </div>
    </el-scrollbar>
    <div class="empty" v-else>
      <div>
        <div class="icon">
          <i class="icon el-icon-share"></i>
        </div>
        <div class="title">好东西要晒出来，快把文件分享给好友吧～</div>
      </div>
    </div>
    <div
      class="right-menu"
      v-if="contextMenuVisible"
      :style="`left: ${rightMenuConfig.left}px; top:${rightMenuConfig.top}px;`"
    >
      <a
        href="javascript:;"
        v-if="multipleSelection.length === 1"
        @click="copy(multipleSelection[0])"
      >
        <i class="el-icon-link"></i>复制链接
      </a>
      <a href="javascript:;" @click="cancelShares">
        <i class="el-icon-switch-button"></i>取消分享
      </a>
      <a
        href="javascript:;"
        @click="
          loadTableData()
          contextMenuVisible = false
        "
      >
        <i class="el-icon-refresh"></i>刷<span style="visibility: hidden"
          >下</span
        >新
      </a>
    </div>
  </div>
</template>

<script>
import shareService from '../../../api/share'
import panUtil from '../../../utils/common'
import { mapMutations } from 'vuex'

export default {
  name: 'Shares',
  components: {},
  props: {},
  data() {
    return {
      tableData: [],
      tableHeight: window.innerHeight - 200,
      multipleSelection: [],
      tableLoading: true,
      checkAll: false,
      contextMenuVisible: false,
      rightMenuConfig: {
        left: 0,
        top: 0,
        type: null,
      },
    }
  },
  methods: {
    ...mapMutations({
      setSearchFlag: 'file/setSearchFlag',
    }),
    init() {
      this.setSearchFlag(false)
      this.loadTableData()
    },
    getListIndex(item) {
      return this.multipleSelection.findIndex(function (val) {
        return val.shareId === item.shareId
      })
    },
    clearSelect() {
      this.multipleSelection = []
      this.contextMenuVisible = false
    },
    itemRightMenu(event, item, index) {
      event.stopPropagation()
      // console.log(event.clientX, event.clientY)
      this.rightMenuConfig.left = event.clientX
      this.rightMenuConfig.top = event.clientY
      this.rightMenuConfig.type = 'item'
      this.$nextTick(() => {
        this.contextMenuVisible = true
        let selectList = JSON.parse(JSON.stringify(this.multipleSelection))
        const index = selectList.findIndex((val) => {
          return val.shareId === item.shareId
        })
        if (index >= 0) {
        } else {
          this.handleSelectionChange([item])
        }
      })
    },
    selectItem(item) {
      this.contextMenuVisible = false
      let selectList = JSON.parse(JSON.stringify(this.multipleSelection))
      const index = selectList.findIndex((val) => {
        return val.shareId === item.shareId
      })
      if (index >= 0) {
        selectList.splice(index, 1)
      } else {
        selectList.push(item)
      }
      this.multipleSelection = selectList
    },
    getFileFontElement(type) {
      return panUtil.getFileFontElement2(type)
    },
    cancelShares() {
      let _this = this
      if (_this.multipleSelection && _this.multipleSelection.length > 0) {
        let shareIdArr = new Array()
        _this.multipleSelection.forEach((item) => {
          shareIdArr.push(item.shareId)
        })
        _this.doCancelShares(shareIdArr.join('__,__'))
        return
      }
      _this.$message.error('请选择要取消的分享')
    },
    doCancelShares(shareIds) {
      let _this = this
      _this
        .$confirm('分享取消后将不可恢复，您确定这样做吗？', '取消分享', {
          confirmButtonText: '确认',
          cancelButtonText: '取消',
          type: 'warning',
        })
        .then(() => {
          shareService.cancelShare(
            {
              shareIds: shareIds,
            },
            () => {
              _this.$message.success('取消分享成功')
              _this.loadTableData()
            },
            (res) => {
              _this.$message.error(res.message)
            }
          )
        })
    },
    cancelShare(row) {
      this.doCancelShares(row.shareId)
    },
    handleSelectionChange(multipleSelection) {
      this.multipleSelection = multipleSelection
    },
    showOperation(row, column, cell, event) {
      panUtil.showOperation(cell)
    },
    hiddenOperation(row, column, cell, event) {
      panUtil.hiddenOperation(cell)
    },
    formatShareStatus(row, column, cellValue, index) {
      if (row.shareStatus === 1) {
        return '有分享文件被删除'
      } else if (row.shareDayType === 0) {
        return '永久有效'
      } else {
        return row.shareEndTime + '到期'
      }
    },
    loadTableData() {
      let _this = this
      _this.tableLoading = true
      shareService.getShares(
        (res) => {
          _this.tableLoading = false
          _this.tableData = res.data
        },
        (res) => {
          _this.tableLoading = false
          _this.$message.error(res.message)
        }
      )
    },
    copy(row) {
      let shareMessage =
        '链接：' +
        row.shareUrl +
        '\n提取码：' +
        row.shareCode +
        '\n赶快分享给小伙伴吧！'
      this.$clipboard(shareMessage)
      this.$message.success('复制成功')
    },
  },
  computed: {},
  mounted() {
    this.init()
  },
  watch: {
    checkAll: {
      handler(val) {
        if (val) {
          this.multipleSelection = JSON.parse(JSON.stringify(this.tableData))
        } else {
          this.clearSelect()
        }
      },
    },
  },
}
</script>

<style lang="scss" scoped>
.pan-main-breadcrumb-content {
  width: 100%;
  padding: 0 25px 0 25px;
  height: 45px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  border-bottom: 1px solid #eee;
  border-top: 1px solid #eee;
}

.breadcrumb-item-a {
  cursor: pointer !important;
  color: #409eff !important;
}
.empty {
  height: calc(100vh - 46px);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #ccc;
  .icon {
    margin: 0 auto 20px;
    .icon {
      font-size: 60px;
    }
  }
  .title {
    font-size: 18px;
  }
}

.file-list1 {
  display: flex;

  padding: 0 20px 0;

  &.table {
    flex-direction: column;
  }
  .item {
    width: 100%;
  }
  .file-item {
    display: flex;
    padding: 20px;
    border-bottom: 1px solid #eee;
    justify-content: space-between;
    flex-direction: row;
    align-items: center;
    cursor: pointer;
    &.sortable-ghost {
      display: none;
    }
    .check {
      margin-right: 20px;
    }
    .icon {
      width: 30px;
      text-align: center;
      margin-bottom: 0px;
      font-size: 20px;
      user-select: none;

      i {
        font-size: 20px;
        margin-right: 15px;
      }
      .svgicon {
        width: 1em;
        height: 1em;
        vertical-align: -0.15em;
        fill: currentColor;
        // overflow: hidden;
        margin-right: 15px;
      }
    }
    .name {
      flex: 1;
      user-select: none;
    }
    .action {
      width: 100px;
    }
    .link {
      width: 300px;
    }
    .code {
      width: 80px;
    }
    .time {
      width: 200px;
      text-align: left;
      user-select: none;
      color: #000;
    }
    .state {
      width: 60px;
    }
  }

  &.list {
    .file-item {
      justify-content: flex-start;
      border-color: #fff;
      &.on {
        border-color: #eee;
      }
    }
  }
}
:deep(.is-horizontal) {
  display: none;
}
:deep(.el-scrollbar__wrap) {
  overflow-x: hidden;
}
.file-list {
  display: flex;
  padding: 0 20px 20px;

  &.table {
    flex-direction: column;
  }
  .file-item {
    display: flex;
    padding: 15px 20px;
    border-bottom: 1px solid #eee;
    justify-content: space-between;
    flex-direction: row;
    align-items: center;
    cursor: pointer;
    .el-image {
      display: inherit;
      overflow: visible;
      :deep(img) {
        border: 1px solid #eee;
      }
    }
    &.sortable-ghost {
      display: none;
    }
    &:hover {
      background-color: #f7f7f7;
      .action {
        opacity: 1 !important;
      }
    }
    .check {
      margin-right: 20px;
      pointer-events: none;
      position: relative;
      &::after {
        content: '';
        width: 100%;
        height: 100%;
        position: absolute;
        display: block;
        left: 0;
        top: 0;
      }
    }
    .icon {
      width: 30px;
      text-align: center;
      margin-bottom: 0px;
      margin-right: 10px;
      font-size: 20px;
      user-select: none;
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
      i {
        font-size: 20px;
        margin-right: 15px;
      }

      .svgicon {
        width: 1em;
        height: 1em;
        vertical-align: -0.15em;
        fill: currentColor;
        // overflow: hidden;
        // margin-right: 15px;
      }
    }
    .name {
      flex: 1;
      user-select: none;
    }
    .action {
      width: 100px;
      opacity: 0;
      transition: all 0.4s;
    }
    .link {
      width: 300px;
    }

    .code {
      width: 80px;
    }
    .time {
      width: 200px;
      text-align: left;
      user-select: none;
      color: #000;
    }
    .state {
      width: 60px;
    }
  }
}
.right-menu {
  position: fixed;
  background: #fff;
  border-radius: 5px;
  overflow: hidden;
  z-index: 999;
  border: 1px solid #eee;
  box-shadow: 0 0.5em 1em 0 rgba(0, 0, 0, 0.1);
  :deep(div) {
    display: block;
    margin-right: 0px;
  }
  a,
  :deep(a) {
    min-width: 100px;
    height: 3em;
    line-height: 3em;
    font-size: 13px;

    display: block;
    color: #1a1a1a;
    text-decoration: none;
    padding: 0 10px;
    &.red {
      color: #f78989;
    }

    &:hover {
      background: #65c6cf;
      color: #fff;
    }

    i {
      margin-right: 10px;
    }
  }
}
</style>
